import React from "react";
import { Row, Col, Card } from "antd";

const Index = (props) => {
  const { IconFont, appData } = props;
  return (
    <>
      {appData.map((rowItem) => {
        return (
          <Row justify="center" key={rowItem.title}>
            <Col span={24} xl={16}>
              <Card
                title={rowItem.title}
                bordered={false}
                className="bear-app_card"
              >
                <ul className="bear-app">
                  {rowItem.data.map((item) => {
                    return (
                      <li key={item.title}>
                        <a
                          href={item.uri}
                          rel="noreferrer nofollow"
                          target="_blank"
                        >
                          <IconFont type={item.icon} />
                          <span>{item.title}</span>
                        </a>
                      </li>
                    );
                  })}
                </ul>
              </Card>
            </Col>
          </Row>
        );
      })}
    </>
  );
};

export default Index;
